<template>	
	<view class="" style="padding-bottom: 100rpx;">
			<view style="display: flex;align-items: center;height: 50%;justify-content: center;" v-if="!jobConList.length">
				<view>
					<image class="cuqnConte"  :src="imgUrl+'/qunsheng.png'"  mode=""></image>
					<view class="" style="color: #8F9294;font-size: 24rpx;padding-top: 10rpx;">没有想要的结果</view>
				</view>
			</view>
			<view class="position">
				<!-- pages/Job/JobDetails -->
				<view class="position-list" v-for="item in jobConList" @click="goPages('/pages/Job/JobDetails?id='+item.id)" >
					<view class="list-header flex-height-between">
						<text class="l">{{item.job_name}}</text>
						<text class="r" v-if="item.min_wage>0">{{item.min_wage}}-{{item.max_wage}}</text>
						<text class="r" v-else>面议</text>
					</view>
					
						
					<view class="label flex-wrap">
						<view class="label-list" v-if='item.nature_cn' style="border: 2rpx solid chocolate; color:chocolate;">{{item.nature_cn}}</view>
						<view class="label-list" v-if='item.experience_cn && item.experience_cn!="不限"' style="border: 2rpx solid forestgreen;color:forestgreen;">{{item.experience_cn}}</view>
						<view class="label-list" v-if='item.education_cn && item.education_cn != item.experience_cn' style="border: 2rpx solid steelblue; color: steelblue;">{{item.education_cn}}</view>
						<view class="label-list" v-if='item.amount>0' style="border: 2rpx solid cadetblue; color: cadetblue;">招{{item.amount}}人</view>	
					</view>
					<view class="ellipsis stne">起始时间： {{item.start_time}}～{{item.end_time}} </view>
					<view class="ellipsis stne">工作地点： {{item.area_cn}} </view>
					
					<view class="flex-height-between">
						<view class="contenArrsbx flex-line-height">
							
						</view>
						<view class="cten">查看岗位</view>
					</view>
				</view>
			</view>
	</view>

</template>

<script>
	// /api/job/type
	import myscrollView from "../../components/myscroll-view.vue"
	import footerTer from "../../components/footer.vue"
	import {
		Request
	} from '@/utils/request.js'
	export default {
		props:{
			company_id:{
				type:[Number,String],
				default:()=>""
			},
			company_count:{
				type:[Number,String],
				default:()=>""
			},
		},
		components:{
			footerTer,
			myscrollView
		},
	    data() {
	        return {
				imgUrl:this.imgUrl,
	            indicatorDots: false,
				jobConList:[],
				imgUrl:this.imgUrl,
				tabIndex:0,
				upAndDown:'upper',
				natureCn:[],
				educationCn:[],
				educationCnIndex:0,
				experienceCn:[],
				experienceCnIndex:0,
				categoryCn:[],
				categoryCnIndex:0,
				majorCn:[],
				majorCnIndex:0,
				industryCn:[],
				industryCnIndex:0,
				searchTitle:'',
				page:1,
				FormData:{},
				xuanzon:['推荐'],
	        }
	    },
		onLoad() {
		},
		onPageScroll() {
			
		},
		mounted() {
			this.joblist();
		},
	    methods: {
			goPages(path){
				uni.navigateTo({
					url:path
				})
			},
			scroll(e){
				this.page=this.page+1;
				this.joblist()
			},
			search(e){
				console.log(e.detail.value);
				console.log(this.searchTitle)
				this.jobConList=[];
				this.page=1;
				this.joblist();
			},
			joblist(){
				Request('job/list',{
					company_id:this.company_id,
					page:this.page,
					limit:this.company_count,
				}).then(({data}) => {
					const tdata = data || [];
					this.jobConList = this.jobConList.concat(tdata);
				})
			},
	     
	    }
	}
	
</script>

<style scoped>
	.flex-top-header{
		position: fixed;
		top: 0;
		left: 0;
		box-sizing: border-box;
		background-color: #fff;
		width: 100%;
		z-index: 10;
		padding-top: 20rpx;
		padding-top: 90rpx;
	}
	.consList{
				height: 32rpx;
				background: #FAF2E7;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #E8A03D;
				text-align: center;
				line-height: 32rpx;
				font-style: normal;
				text-transform: none;
				margin-left: 10rpx;
			}
	.content{
		padding-top: 260rpx !important;
	}
	.tabLIst{
		/* height: 52rpx; */
		margin-bottom: 16rpx;
		
		margin-right: 16rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		padding: 0 16rpx;
		font-size: 24rpx;
		color: #fff;
		text-align: center;
		line-height: 52rpx;
		font-style: normal;
		text-transform: none;
	}
	.saoxuan-posiconterConter{
		max-height: 50vh;
		overflow: auto;
	}
	.xueLIConter{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #0D0E0F;
		text-align: left;
		padding-top: 24rpx;
		margin-bottom: 16rpx;
		font-style: normal;
		text-transform: none;
	}
	.tabLIst.as{
		background-color: #F7F8FA;
		color: #8F9294;
		
	}
	.tabLIst.active{
		background-color: #3B5EEC;
		color: #FFFFFF;
	}
	
	.flex-top-header .search{
		height: 68rpx;
		background: #F7F8FA;
		border-radius: 34rpx 34rpx 34rpx 34rpx;
		box-sizing: border-box;
		padding: 20rpx 24rpx;
	}
	.flex-top-header .search-img{
		width: 28rpx;
		height: 28rpx;
		margin-right: 24rpx;
	}
	.flex-top-header .input{
		width: 104rpx;
		height: 37rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #8F9294;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.saoxuan{
		box-sizing: border-box;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		position: relative;
		color: #8F9294;
		text-align: left;
		font-style: normal;
		text-transform: none;
		padding-top: 34rpx;
		padding-bottom: 24rpx;
	}
	.saoxuan-posiconter{
		width: 100%;
		box-sizing: border-box;
		background-color: #fff;
		border-top: 1rpx solid #EDEAEA;
	}
	.conteArr{
		width: 16rpx;
		height: 16rpx;
		transform: translate(-180deg);
		transform: rotate(-180deg);
	}
	.position{
		margin-top: 24rpx;
	}
	.position-list{
		padding: 24rpx;
		width: 702rpx;
		box-sizing: border-box;
		background:#fff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-bottom: 16rpx;
	}
	.list-header .l{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #000000;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.list-header .r{
		font-family: MiSans, MiSans;
		font-weight: 600;
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: right;
		font-style: normal;
		text-transform: none;
	}
	.position-list .stne{
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 26rpx;
		color: #000000;
		text-align: left;
		margin-bottom: 16rpx;
		margin-top: 10rpx;
		font-style: normal;
		text-transform: none;
	}
	
	.position-list .cten{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #8F9294;
		text-align: right;
		font-style: normal;
		text-transform: none;
	}
	.label-list{
		height: 48rpx;
		padding: 0 16rpx;
		background: rgba(255, 255, 255, .1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #fff;
		margin: 18rpx 0;
		margin-right: 16rpx;
		text-align: center;
		line-height: 48rpx;
		font-style: normal;
		text-transform: none;
	}
	.contenArrsbx{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #fff;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
		.position-list .cten{
			width: 144rpx;
			height: 56rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 56rpx;
			font-style: normal;
			text-transform: none;
			background: #3B5EEC;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
		}
		.label-list{
			height: 48rpx;
			padding: 0 16rpx;
			background: #F7F8FA;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #000000;
			margin-right: 16rpx;
			margin-bottom: 24rpx;
			text-align: center;
			line-height: 48rpx;
			font-style: normal;
			text-transform: none;
		}
		.contenArrsbx{
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #646669;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}
		.contenArrsbx .user-img{
		width: 48rpx;
		height: 48rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin-right: 8rpx;
	}
	.tijiaoC{
		padding: 24rpx 0;
		box-sizing: border-box;
		border-bottom: 1rpx solid rgb(237, 234, 234);
	}
	.tijiaoC .congzhi{
		width: 180rpx;
		height: 80rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 2rpx solid #3B5EEC;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #3B5EEC;
		text-align: center;
		line-height: 80rpx;
		font-style: normal;
		text-transform: none;
	}
	.tijiaoC .shaixuan{
		width: 498rpx;
		height: 80rpx;
		background: #3B5EEC;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
	.a{
			border: 2rpx solid chocolate;
			color:chocolate ;
		}
		.b{
			border: 2rpx solid steelblue; 
			color: steelblue;
		}
		.c{
			border: 2rpx solid forestgreen;
			color:forestgreen;
		}
		.d{
			border: 2rpx solid chocolate; 
			color: chocolate;
		}
	
</style>